<template>
	<div style="height: 44px;background-color: #fff;width:100%"></div>
	<!-- 导航栏 -->
	<view class="content">
		<!-- 距离顶部的距离 刚好留出状态栏即可 即statusBarHeight -->
		<view class="topNav" :style="{height:navHeight+'px',paddingTop:statusBarHeight+'px'}">
			<view class="nav-left"></view>
			<view class=" nav-center">
				关键数据
			</view>
			<view class="nav-right"></view>
		</view>
	</view>

	<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
		<!-- 导航栏以下的主体部分 -->
		<view class="background">
			<!-- 统计第一行 -->
			<view class="statisticsTop" v-if="roleAuthority=='StoreStaff'||roleAuthority=='partner'">
				<text v-if="roleAuthority=='partner'">您的累计分润金额为
				<text class="statisticsTopSta">{{profitSum}}</text> 
				元
				</text>
				<text v-if="roleAuthority=='StoreStaff'">本预算年度您已创造业绩
				<text class="statisticsTopSta">{{profitSum}}</text>
				
				元
				</text>
			</view>
			<!-- 统计第二行 里面最多包含三个模块(合伙人、员工、负责人的) -->
			<view class="statisticsMain" v-if="!(roleAuthority == 'StoreManager')">
				<view class="statisticsMainItem">
					<view v-if="roleAuthority == 'StoreDuty'">年度成交单数</view>
					<view v-else>本月成交单数</view>
					<view class="statisticsMainItemSta">{{othersSta.quantity}}</view>
					
				</view>
				<view class="statisticsMainItem">
					<view v-if="roleAuthority == 'StoreDuty'">年度业绩金额</view>
					<view v-else>本月业绩金额</view>
					<view class="statisticsMainItemSta">{{othersSta.achievement}}</view>
					
				</view>
				<view class="statisticsMainItem" :class="{hiddenClass:roleAuthority=='StoreStaff'}">
					<view v-if="roleAuthority == 'StoreDuty'">年度分润金额</view>
					<view v-else>本月分润金额</view>
					<view class="statisticsMainItemSta">{{othersSta.profit}}</view>
					
				</view>
			</view>

			<!-- 统计第二行 里面最多包含三个模块(店长的) -->
			<view class="statisticsMain" v-if="roleAuthority == 'StoreManager'">
				<view class="statisticsMainItem">
					<view>年度成交单数</view>
					<view class="statisticsMainItemSta">{{storeManagerSta.quantity}}</view>
					
					
				</view>
				<view class="statisticsMainItem">
					<view>年度业绩金额</view>
					<view class="statisticsMainItemSta">{{storeManagerSta.achievement}}</view>
					
					
				</view>
				<view class="statisticsMainItem">
					<view>年度分润金额</view>
					<view class="statisticsMainItemSta">{{storeManagerSta.profit}}</view>
					
					
				</view>
			</view>


			<!-- 店长的 员工 合伙人筛选框 -->
			<uni-data-select :clear="false" v-model="staffOrPartnerSelect" :localdata="staffOrPartnerRange"
				v-if="roleAuthority == 'StoreManager'"></uni-data-select>


			<!-- 门店年度预算达成 -->
			<storeAnnualBudgetAchievement v-if="roleAuthority == 'StoreManager'&& staffOrPartnerSelect ==0">
			</storeAnnualBudgetAchievement>
			<!--  -->
			<view style="display: flex;justify-content: space-between;"
				v-if="roleAuthority == 'StoreManager'&& staffOrPartnerSelect ==0">
				<!-- 月目标达成 -->
				<monthlyGoalAchievement></monthlyGoalAchievement>
				<!-- 季目标达成 -->
				<seasonalGoalAchievement></seasonalGoalAchievement>
			</view>
			<!-- 员工月业绩达成 -->
			<staffMonthlyPerformanceAchievement v-if="roleAuthority == 'StoreManager'&& staffOrPartnerSelect ==0">
			</staffMonthlyPerformanceAchievement>


			<!-- 门店年度分润达成 -->
			<storeProfitSharingAchievement v-if="roleAuthority == 'StoreManager'&& staffOrPartnerSelect ==1">
			</storeProfitSharingAchievement>
			<!-- 合伙人月业绩达成 -->
			<partnerPerformanceAchievementMonthly v-if="roleAuthority == 'StoreManager'&& staffOrPartnerSelect ==1">
			</partnerPerformanceAchievementMonthly>
			<!-- 合伙人月分润金额 -->
			<partnerProfitSharingMonthly v-if="roleAuthority == 'StoreManager'&& staffOrPartnerSelect ==1">
			</partnerProfitSharingMonthly>
			<!-- 产品销售业绩 -->
			<productSalesPerformance :staffOrPartnerSelect v-if="roleAuthority == 'StoreManager'"></productSalesPerformance>


			<!-- 自然年度业绩达成 -->
			<naturalAnnualPerformanceAchievement v-if="roleAuthority == 'StoreDuty'"></naturalAnnualPerformanceAchievement>
			<!-- 各门店分润金额 -->
			<storeProfitSharingAmount v-if="roleAuthority == 'StoreDuty'"></storeProfitSharingAmount>
			<!-- 各门店月度业绩达成 -->
			<storePerformanceAchievementMonthly v-if="roleAuthority == 'StoreDuty'"></storePerformanceAchievementMonthly>
			<!-- 产品销售利润 -->
			<productSalesProfit v-if="roleAuthority == 'StoreDuty'"></productSalesProfit>


			<!-- 成交订单分布图表 -->
			<completedOrders :staffOrPartnerSelect></completedOrders>


			<!-- 数据趋势图标（合伙人） -->
			<dataTrendsPartner v-if="roleAuthority == 'partner'"></dataTrendsPartner>
			<!-- 数据趋势图标（门店员工） -->
			<dataTrendsStaff v-if="roleAuthority == 'StoreStaff'"></dataTrendsStaff>
		</view>

	</scroll-view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';

	import {
		onShow
	} from '@dcloudio/uni-app'

	import completedOrders from './components/completedOrders.vue'
	import dataTrendsPartner from './components/dataTrendsPartner.vue'
	import dataTrendsStaff from './components/dataTrendsStaff.vue'
	import storeAnnualBudgetAchievement from './components/storeAnnualBudgetAchievement.vue'
	import monthlyGoalAchievement from './components/monthlyGoalAchievement.vue'
	import seasonalGoalAchievement from './components/seasonalGoalAchievement.vue'
	import staffMonthlyPerformanceAchievement from './components/staffMonthlyPerformanceAchievement.vue'
	import productSalesPerformance from './components/productSalesPerformance.vue'
	import storeProfitSharingAchievement from './components/storeProfitSharingAchievement.vue'
	import partnerPerformanceAchievementMonthly from './components/partnerPerformanceAchievementMonthly.vue'
	import partnerProfitSharingMonthly from './components/partnerProfitSharingMonthly.vue'
	import naturalAnnualPerformanceAchievement from './components/naturalAnnualPerformanceAchievement.vue'
	import storeProfitSharingAmount from './components/storeProfitSharingAmount.vue'
	import storePerformanceAchievementMonthly from './components/storePerformanceAchievementMonthly.vue'
	import productSalesProfit from './components/productSalesProfit.vue'
	import {
		phoneStaGetProfitSum,
		phoneStaGetStoreDutySta,
		phoneStaGetStoreManSta,
		profitHomeProfitSta
	} from '../../utils/data';
import { Logger } from 'sass';



	//获取登录账号的roleAuthority
	let roleAuthority = ref()
	//获取登录账号的businessId
	let businessId = ref()

	// let userinfo = JSON.parse(uni.getStorageSync('userinfo'))
	// roleAuthority.value = userinfo.roleAuthority

	



	let navHeight = ref(''); // 导航栏高度
	let statusBarHeight = ref(''); // 状态栏高度


	//======================店长的 员工或合伙人下拉框==============================//
	let staffOrPartnerSelect = ref(0)
	let staffOrPartnerRange = ref([{
			value: 0,
			text: "员工相关(下列数据均为员工相关数据)"
		},
		{
			value: 1,
			text: "合伙人相关(下列数据均为合伙人相关数据)"
		},

	])


	//获取店长上方统计
	let storeManagerSta = reactive({
		quantity: 0,
		achievement: 0,
		profit: 0,
	})

	let getStoreManSta = () => {
		storeManagerSta.quantity =0
		storeManagerSta.achievement = 0
		storeManagerSta.profit = 0
		phoneStaGetStoreManSta('/phoneSta/getStoreManSta', {
			businessId: businessId.value
		}).then((res) => {
			if (res.code == 200) {
				storeManagerSta.quantity = res.data.quantity
				storeManagerSta.achievement = res.data.achievement
				storeManagerSta.profit = res.data.profit
			}

		})
	}

	//获取其他人上方统计
	let othersSta = reactive({
		quantity: 0,
		achievement: 0,
		profit: 0,
	})

	let getOthersSta = () => {
		othersSta.quantity = 0
		othersSta.achievement = 0
		othersSta.profit = 0
		profitHomeProfitSta('/profit/homeProfitSta', {
			businessId: businessId.value
		}).then((res) => {
			if (res.code == 200) {
				othersSta.quantity = res.data.quantity
				othersSta.achievement = res.data.achievement
				othersSta.profit = res.data.profit
			}

		})
	}
	
	let getDutySta = () => {
		othersSta.quantity = 0
		othersSta.achievement =0
		othersSta.profit = 0
		phoneStaGetStoreDutySta('/phoneSta/getStoreDutySta', {
			
		}).then((res) => {
			if (res.code == 200) {
				othersSta.quantity = res.data.quantity
				othersSta.achievement = res.data.achievement
				othersSta.profit = res.data.profit
			}
	
		})
	}
	
	

	//合伙人-生涯规划师累计分润金额-业绩（上方小字）合伙人-生涯规划师累计分润金额-业绩（上方小字）
	let profitSum = ref(0)

	let getProfitTotla = () => {
		profitSum.value = 0
		phoneStaGetProfitSum('/phoneSta/getProfitSum', {

		}).then((res) => {
			if (res.code == 200) {
				profitSum.value = res.data
			}
		})
	}




	onMounted(() => {
		let {
			statusBarHeights,
			system // 机型
		} = uni.getSystemInfoSync()
		// 注意返回的单位是px 不是rpx
		// 而导航栏的高度则 = 状态栏的高度 + 判断机型的值（是ios就+40，否则+44）
		// 这个高度刚好和胶囊对齐
		statusBarHeight.value = statusBarHeights
		navHeight.value = statusBarHeights + (system.indexOf('iOS') > -1 ? 40 : 44)
	})
	
	
	//每次切回页面触发。（退出登录，登下一个不同账号要切换roleAuthority）
	onShow(() => {
		staffOrPartnerSelect.value = 0
		let userinfo = JSON.parse(uni.getStorageSync('userinfo'))
		roleAuthority.value = userinfo.roleAuthority
		
		
		businessId.value = JSON.parse(uni.getStorageSync('businessId'))
	
		//合伙人和生涯规划师最上方的一行
		if (roleAuthority.value == 'StoreStaff' || roleAuthority.value == 'partner') {
			getProfitTotla()
		}
	
		//第二行（最多放下三个模块）
		if (roleAuthority.value == 'StoreManager') {
			getStoreManSta()
		}else if(roleAuthority.value == 'StoreDuty'){
			getDutySta()
		}
		 else {
			getOthersSta()
		}
	
	})
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}
	
	.scroll-Y{
		height: calc(100vh - 200rpx);
	}
	
	.hiddenClass{
		visibility: hidden;
	}

	/* =========导航栏========= */
	.topNav {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.nav-left {
		width: 20%;
		font-size: 36rpx;
		font-weight: 600;
	}

	.nav-center {
		width: 60%;
		height: 62rpx;
		padding-left: 25rpx;
		box-sizing: border-box;
		text-align: center;
		font-size: 40rpx;
	}

	.nav-right {
		width: 20%;
		font-size: 36rpx;
		font-weight: 600;
		display: flex;
		justify-content: end;
	}

	.background {
		width: 750rpx;
		background: #F7F8FA;
		padding: 14rpx 31rpx;

		.statisticsTop {
			width: 688rpx;
			height: 68rpx;
			background: white;
			margin-bottom: 14rpx;
			display: flex;
			align-items: center;
			padding: 15rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #6c6c6c;
			.statisticsTopSta{
				color: #ff8f38;
				font-size: 36rpx;
			}
		}

		.statisticsMain {
			width: 688rpx;
			// height: 182rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 14rpx;

			.statisticsMainItem {
				width: 220rpx;
				height: 100%;
				background: white;
				padding: 15rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #6c6c6c;
				.statisticsMainItemSta{
					color: #ff8f38;
					font-size: 36rpx;
				}
			}
		}

	}
</style>